<style lang="less">
  @import './multipleChoices.less';
</style>
<template>
  <div>
  <Form :model="seachForm" inline :label-width="80" v-show="!isEditing">
    <FormItem prop="title" label="题目">
      <Input v-model="seachForm.title" placeholder="请输入查询文字"></Input>
    </FormItem>
    <FormItem>
      <Button icon="ios-search" @click="seacherSubmit('seacherForm')">查询</Button>
    </FormItem>
  </Form>
  <ButtonGroup v-show="!isEditing">
    <Button icon="ios-add" @click="btnAddClick">新增</Button>
    <Button icon="ios-create" @click="btnEditClick" :disabled="!currentRow">修改</Button>
    <Button icon="ios-trash" @click="btnDelClick" :disabled="!currentRow">删除</Button>
  </ButtonGroup>
  <Table v-show="!isEditing" border highlight-row ref="currentRowTable" @on-current-change="tableCurrentChange" :columns="columns" :data="datas"></Table>
  <Page :total="pageInfo.totalRows" page-size=2 @on-change="pageNumberChange" v-show="!isEditing" />
  <Form v-if="isEditing" :model="dataForm" :label-width="80">
    <FormItem prop="subjectID" label="科目">
  请选择科目：
  <template>
    <i-select v-model="dataForm.subjectID" style="width:200px" not-found-text="无科目">
      <i-option v-for="item in courses" clearable :value="item.id" v-bind:key="item.id">
        {{item.id}}->{{item.name}}
      </i-option>
    </i-select>
  </template>
    </FormItem>
    <FormItem prop="chapterID" label="章节">
  请选择章节：
  <template>
    <i-select v-model="dataForm.chapterID" style="width:200px" not-found-text="无章节">
      <i-option v-for="item in chapters" clearable :value="item.id" v-bind:key="item.id">
        {{item.courseId}}->{{item.id}}->{{item.name}}
        <v-div v-if=""></v-div>
      </i-option>
    </i-select>
  </template>
    </FormItem>
    <FormItem prop="knowledgeID" label="知识点">
  请选择知识点：
  <template>
    <i-select v-model="dataForm.knowledgeID" style="width:200px" not-found-text="无知识点">
      <i-option v-for="item in knowledgepoints" clearable :value="item.id" v-bind:key="item.id">
        {{item.courseId}}->{{item.chapterId}}->{{item.name}}
      </i-option>
    </i-select>
  </template>
    </FormItem>
    <FormItem prop="difficulty" label="难度">
    请选择难度：
    <template>
      <i-select v-model="dataForm.difficulty" style="width:200px" not-found-text="无知识点">
        <i-option value="1">1</i-option>
        <i-option value="2">2</i-option>
        <i-option value="3">3</i-option>
        <i-option value="4">4</i-option>
        <i-option value="5">5</i-option>
      </i-select>
    </template><br><br><br>
    </FormItem>
    <FormItem prop="tile" label="题目">
      <Input v-model="dataForm.title" placeholder="Enter something..."></Input>
    </FormItem>
    <FormItem prop="A" label="选项A">
      <Input v-model="dataForm.A" placeholder="Enter something..."></Input>
    </FormItem>
    <FormItem prop="B" label="选项B">
      <Input v-model="dataForm.B" placeholder="Enter something..."></Input>
    </FormItem>
    <FormItem prop="C" label="选项C">
      <Input v-model="dataForm.C" placeholder="Enter something..."></Input>
    </FormItem>
    <FormItem prop="D" label="选项D">
      <Input v-model="dataForm.D" placeholder="Enter something..."></Input>
    </FormItem>
    <h2>正确答案的选项请打✔：</h2>
    <FormItem prop="resultA" label="答案A">
      A<input v-model="dataForm.resultA" type="checkbox" name="result" value="true"/>&emsp;
    </FormItem>
    <FormItem prop="resultB" label="答案B">
      B<input v-model="dataForm.resultB" type="checkbox" name="result" value="true"/>&emsp;
    </FormItem>
    <FormItem prop="resultC" label="答案C">
      C<input v-model="dataForm.resultC" type="checkbox" name="result" value="true"/>&emsp;
    </FormItem>
    <FormItem prop="resultD" label="答案D">
      D<input v-model="dataForm.resultD" type="checkbox" name="result" value="true"/>
    </FormItem>
    <FormItem>
      <Button type="primary" @click="btnSaveClick">保存</Button>
      <Button style="margin-left: 8px" @click="btnCancelClick">取消</Button>
    </FormItem>
  </Form>
  </div>
  </template>
<script>
import { getmultipleChoicesList, getmultipleChoices, addmultipleChoices, updatemultipleChoices, deletemultipleChoices } from '@/api/multipleChoices'
import {getCourseList, getCourse, addCourse, updateCourse, deleteCourse} from '@/api/course'
import {getChapterList} from '@/api/chapters'
import {getKnowledgepointList} from '@/api/knowledgepoints'

export default {
  name: 'multipleChoices',
  data: function () {

    return {
      message: 'Hello Vue!',
      currentRow: null,
      isEditing: false,
      seachForm: {
        title: ''
      },
      pageInfo: {
        pageNumber: 1,
        pageSize: 3,
        totalRows: 0
      },
      dataForm: {},
      columns: [{
        type: 'index',
        width: 60,
        align: 'center'
      }, {
        title: this.$t('题目'),
        key: 'title'
      }, {
        title: '选项A',
        key: 'A'
      }, {
        title: '选项B',
        key: 'B'
      }, {
        title: '选项C',
        key: 'C'
      }, {
        title: '选项D',
        key: 'D'
      }, {
        title: '答案A',
        key: 'resultA'
      }, {
        title: '答案B',
        key: 'resultB'
      }, {
        title: '答案C',
        key: 'resultC'
      }, {
        title: '答案D',
        key: 'resultD'
        },{
          title: '难度',
          key:'difficulty'
        },{
          title: '科目',
          key:'subjectID'
        },{
          title: '章节',
          key:'chapterID'
        },{
          title: '知识点',
          key:'knowledgeID'
        }
        ],
        datas: [],//多选题列表
        courses: [], // 课程列表
        chapters: [], //章节列表
        knowledgepoints: [],//知识点列表
      }
    },
      created()
    {
      console.log('created message is: ' + this.message);
      this.queryList();
      this.selectCoursesList();
      this.selectChaptersList();
      this.selectKnowledgepointsList();
    }
  ,
    mounted()
    {
      console.log('mounted message is: ' + this.message);
    }
  ,
    methods : {
      seacherSubmit: function () {
        this.pageInfo.pageNumber = 1;
        this.queryList();
      }
    ,

      //科目显示
      selectCoursesList: function () {
        var queryParams = {};
        getCourseList(queryParams).then(res => {
          this.courses = res.data.rows;
        });
        //alert(this.subjects.length);
      }
    ,
      //章节显示
      selectChaptersList: function () {
        var queryParams = {};
        getChapterList(queryParams).then(res => {
          this.chapters = res.data.rows;
        });
      }
    ,
      //章节选中事件
      indexSelect2:function (event) {
        // console.log(this.A);
        //alert(event.target.value + "........");
      }
    ,
      //知识点显示
      selectKnowledgepointsList: function () {
        var queryParams = {};
        getKnowledgepointList(queryParams).then(res => {
          this.knowledgepoints = res.data.rows;
        });
      }
    ,

      queryList: function () {
        var queryParams = {
          title: this.seachForm.title,
          pageNumber: this.pageInfo.pageNumber,
          pageSize: this.pageInfo.pageSize
        };
        //显示数据
        getmultipleChoicesList(queryParams).then(res => {
          this.datas = res.data.rows;
          var i = 0;
          while (i < this.datas.length) {
            if (this.datas[i].resultA == 1)
              this.datas[i].resultA = '正确';
            else
              this.datas[i].resultA = '错误';
            if (this.datas[i].resultB == 1)
              this.datas[i].resultB = '正确';
            else
              this.datas[i].resultB = '错误';
            if (this.datas[i].resultC == 1)
              this.datas[i].resultC = '正确';
            else
              this.datas[i].resultC = '错误';
            if (this.datas[i].resultD == 1)
              this.datas[i].resultD = '正确';
            else
              this.datas[i].resultD = '错误';
            i++;
          }
          this.pageInfo.totalRows = parseInt(res.data.total);
        });
      }
    ,
      pageNumberChange: function (pagenum) {
        this.pageInfo.pageNumber = pagenum;
        this.queryList();
      }
    ,
      tableCurrentChange: function (currentRow, oldCurrentRow) {
        this.currentRow = currentRow;
      }
    ,
      btnAddClick: function () {
        this.dataForm = {};
        this.isEditing = true;
      }
    ,
      btnEditClick: function () {
        this.dataForm = this.currentRow;
        this.isEditing = true;
      }
    ,
      btnDelClick: function () {
        this.$Modal.confirm({
          title: '删除',
          content: '确定要删除选中的信息吗?',
          onOk: () => {
            this.delData();
          }
        });
      }
    ,
      btnSaveClick: function () {
        if (this.dataForm.id) {
          updatemultipleChoices(this.dataForm.title, this.dataForm).then(res => {
            if (res.data && res.data.affectedRows > 0) {
              this.$Message.success('保存成功!');
              this.queryList();
              this.isEditing = false;
            } else {
              this.$Message.error(res.error);
            }
          });
        } else {
          addmultipleChoices(this.dataForm).then(res => {
            if (res.data && res.data.affectedRows > 0) {
              this.$Message.success('保存成功!');
              this.queryList();
              this.isEditing = false;
            } else {
              this.$Message.error(res.error);
            }
          });
        }
      }
    ,
      btnCancelClick: function () {
        this.isEditing = false;
      }
    ,
      delData: function () {
        deletemultipleChoices(this.currentRow.id).then(res => {
          if (res.data && res.data.affectedRows > 0) {
            this.$Message.success('删除成功!');
            this.queryList();
          } else {
            this.$Message.error('删除失败!');
          }
        });
      }
    }
  }
</script>
